<template>
  <div class="h-[2vh]">
    <img src="../src/assets/imgs/image.png" alt="Your Image Description" style="height: 8vh; width: 100%" />
  </div>

  <div class="bg-[url('assets/imgs/bg2.jpg')] bg-cover bg-center h-[98vh] text-white p-5 pt-0 flex overflow-hidden">
    <!--左-->
    <div class="flex-1 mr-5 p-3 flex flex-col mt-5">
      <!--左上-->

      <div class="flex-none h-1/2 bg-opacity-50 bg-regal-bg p-3 flex flex-col" style="position: relative">
        <div class="panel">
          <div class="panel-footer"></div>
        </div>
        <!-- 漏斗图 -->
        <Funnel />
      </div>

      <!--左下-->
      <div class="flex-none h-1/2 bg-opacity-50 bg-regal-bg p-3 flex flex-col mt-5" style="position: relative">
        <div class="panel2">
          <div class="panel-footer2"></div>
        </div>
        <!-- 预警图 -->
        <EarlyWarning />
      </div>
    </div>

    <div class="w-1/2 mr-5 flex flex-col mt-10">
      <div class="flex-none bg-regal-bg bg-opacity-50 p-3 mt-3" style="position: relative; height: 350px">
        <!-- 中间图 -->
        <Map />
      </div>
      <div class="flex-none h-2/6 bg-opacity-50 bg-regal-bg p-3 mt-8" style="position: relative">
        <!-- 竖柱状图 -->
        <HistogramS />
      </div>
    </div>

    <!--右-->
    <div class="flex-1 mr-5 p-3 flex flex-col mt-5">
      <div class="flex-none h-1/3 bg-opacity-50 bg-regal-bg p-3 flex flex-col" style="position: relative">
        <!-- 故障图 -->
        <Fault />
      </div>
      <div class="flex-none h-1/3 bg-opacity-50 bg-regal-bg p-3 flex flex-col mt-2.5" style="position: relative">
        <!-- 雷达图 -->
        <Radar />
      </div>
      <div class="flex-none h-1/3 bg-opacity-50 bg-regal-bg p-3 flex flex-col mt-2.5" style="position: relative">
        <!-- 横柱状图 -->
        <HistogramH />
      </div>
    </div>
  </div>
</template>

<script setup>
import EarlyWarning from "./components/EarlyWarning.vue";
import Fault from "./components/Fault.vue";
import Funnel from "./components/Funnel.vue";
import HistogramH from "./components/HistogramH.vue";
import HistogramS from "./components/HistogramS.vue";
import Map from "./components/Map.vue";
import Radar from "./components/Radar.vue";

import { ref } from "vue";
import { getVisualization } from "./api/visualization.js";

const data = ref(null);
const loadData = async () => {
  data.value = await getVisualization();
  console.log(1);
};
</script>

<style lang="scss" scoped>
.panel {
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 20px;
    border-left: 3px solid #00ffff;
    border-top: 2px solid #00ffff;
    content: "";
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 20px;
    border-right: 3px solid #00ffff;
    border-top: 2px solid #00ffff;
    content: "";
  }
}

.panel-footer {
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 20px;
    border-left: 3px solid #00ffff;
    border-bottom: 2px solid #00ffff;
    content: "";
  }

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5px;
    height: 20px;
    border-right: 3px solid #00ffff;
    border-bottom: 2px solid #00ffff;
    content: "";
  }
}

.panel2 {
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 20px;
    border-left: 3px solid #00ffff;
    border-top: 2px solid #00ffff;
    content: "";
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 20px;
    border-right: 3px solid #00ffff;
    border-top: 2px solid #00ffff;
    content: "";
  }
}

.panel-footer2 {
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 20px;
    border-left: 3px solid #00ffff;
    border-bottom: 2px solid #00ffff;
    content: "";
  }

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5px;
    height: 20px;
    border-right: 3px solid #00ffff;
    border-bottom: 2px solid #00ffff;
    content: "";
  }
}
</style>
